<template>
    <div class="body-bj password-box" ref="homePage">
        <div class="header"></div>
		<div class="centent">
			<div class="login-box">
                <div class="login-ww">
                    <div class="login-input">
                        <span class="passwoed-title">忘记密码</span>
                        <el-form label-width="100px" :model="formLabelAlign">
                            <el-form-item label="账号">
                                <el-input v-model="formLabelAlign.username"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号">
                                <el-input v-model="formLabelAlign.phone"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码" class="yzm">
                                <el-input v-model="formLabelAlign.code"></el-input>
                                <span class="fsYzms" v-if="isYz" @click="addYzm()">获取短信验证码</span>
                                <span class="fsYzms hui" v-else>{{yzmTs}}</span>
                            </el-form-item>
                            <el-form-item label="输入新密码">
                                <el-input type="password" v-model="formLabelAlign.newPwd"></el-input>
                            </el-form-item>
                            <el-form-item label="重复新密码">
                                <el-input type="password" v-model="formLabelAlign.repeatPwd"></el-input>
                            </el-form-item>
                        </el-form>
                        <span class="password-button" @click="passWord()">提交</span>
                    </div>
                </div>
			</div>
		</div>
        <ul class="falv">
            <router-link tag="li" :to="{name:'theLaw',query:{name:'法律声明'}}"><span>法律声明</span></router-link>
            <router-link tag="li" :to="{name:'theLaw',query:{name:'隐私政策声明'}}"><span>隐私政策声明</span></router-link>
            <router-link tag="li" :to="{name:'theLaw',query:{name:'举报不良信息'}}"><span>举报不良信息</span></router-link>
            <router-link tag="li" :to="{name:'theLaw',query:{name:'可接受的使用政策'}}"><span>可接受的使用政策</span></router-link>
        </ul>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            clientHeight:'',
            formLabelAlign: {
                subType:0,          //子类型 0考生 1机构
                type:3,             //用户类型 1手机 2电子邮箱 3用户名 4微信
            },
            isYz:true,
            yzmTs:"",
            parmes:{
                phone:'',
                type:3
            }
        }
    },
    mounted(){
        this.clientHeight = `${document.documentElement.clientHeight}`
        window.onresize = function temp(){
            this.clientHeight = `${document.documentElement.clientHeight}`
        }
    },
    watch:{
        clientHeight(){
            this.changeFixed(this.clientHeight)
        }
    },
    methods:{
        changeFixed(clientHeight){
            let w = clientHeight
            this.$refs.homePage.style.height = `${w}px`
        },
        // 获取验证码
        yzm(){
            let num = 60
            this.yzmTs = '60秒'
            let tiemYzm = setInterval(()=>{
                if(num == 0){
                    this.isYz = !this.isYz
                    clearInterval(tiemYzm)
                }else{
                    num--
                    this.yzmTs = `${num}秒`
                }
            },1000)
        },
        addYzm(){
            this.parmes.phone = this.formLabelAlign.phone
            apiHttp.apiIndex.accountSms(this.parmes).then(resp=>{
                if(resp.code == 0){
                    this.$message({
                        message: '发送成功',
                        type: 'success'
                    })
                    this.yzm()
                    this.isYz = false
                }else{
                    this.$message.error(resp.message)
                }
            })
        },
        passWord(){
            apiHttp.apiIndex.forgetPwd(this.formLabelAlign).then(resp=>{
                if(resp.code == 0){
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                    this.$router.push({
                        path:'/'
                    })
                }else{
                    this.$message.error(resp.message)
                }
            })
        }
    }
}
</script>

<style scoped>
.body-bj{
    width: 100%;
    height: 100%;
    background: url(../../../static/img/content.jpg) no-repeat center;
    background-size: cover;
    overflow: hidden;
    position: relative;
}
.header{
    background: url(../../../static/img/header.jpg) no-repeat center #5d2805;
    width: 100%;
    height: 119px;
}
.centent{
    width: 100%;
    height: 100%;
}
.login-box{
    width: 490px;
    min-height: 365px;
    position: fixed;
    top:50%;
    left: 50%;
    margin-left: -255px;
    margin-top: -250px;
}
.login-ww{
    width: 490px;
    min-height: 345px;
    background-color: #f7f5ec;
    overflow: hidden;
}
.login-input{
    padding: 20px;
    width: 410px;
    min-height: 410px;
    background-color: #fff;
    margin: 20px auto;
    box-shadow: 0 0 10px #e2dacd;
}
.biaoti{
    width: 100%;
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    padding-top: 30px;
    display: block;
}
.passwoed-title{
    font-size: 16px;
    display: block;
    height: 50px;
    line-height: 50px;
    color: #5d2805;
    font-weight: bold;
}
.hui{
    background-color: #999 !important;
}
</style>
<style lang="less">
.password-box{
    .el-form-item{
        height: 40px;
        overflow: hidden;
    }
    .el-form-item__label{
        text-align:justify;
    }
    .el-form-item__label:after{
        display: inline-block; 
        content: '';
        padding-left: 100%; 
    } 
    .password-button{
        height: 40px;
        width: 100%;
        line-height: 40px;
        color: #fff;
        text-align: center;
        font-size: 16px;
        background-color: #5d2805;
        display: block;
        border-radius: 5px;
    }
    .yzm{
        .el-form-item__content{
            text-align: left;
            .el-input{
                width: 50%;
            }
            .fsYzms{
                width: 45%;
                cursor: pointer;
                height: 30px;
                line-height: 30px;
                display: block;
                text-align: center;
                float: right;
                background-color: #5d2805;
                color: #fff;
                border-radius: 5px;
            }
        }
    }
}
</style>

